import { StationService } from 'user/services/stationService';
import { MobilePage } from 'components/mobilePage';
import { UserPage } from 'user/application';
import { MemberService } from 'user/services/memberService';
import ReactDOM = require('react-dom');
import React = require('react');
import { PageSpiner, PageSpinerContext } from "../../share/controls/page-spiner";
import { PageProps } from 'maishu-chitu-react';

// export default async function (page: UserPage) {

//     let pageId = (page.data.pageId || page.data.id) as string;
//     let station = page.createService(StationService);

//     let template: PageData;
//     let pageData = await station.pages.pageDataById(pageId)
//     if (pageData.templateId) {
//         template = await station.pages.pageDataById(pageData.templateId);
//     }
//     let member = await page.createService(MemberService);
//     let store = await member.store();
//     ReactDOM.render(<MobilePage pageData={pageData} elementPage={page} template={template} styleColor={store.Style} />, page.element);

// }


interface Props extends PageProps {
    data: {
        pageId: string
    }
}

type LoadResult = {
    template: PageData
    store: Store,
    pageData: PageData
}

export default class DefaultPage extends React.Component<Props> {
    async loadData(): Promise<LoadResult> {

        let station = this.props.createService(StationService);
        let member = this.props.createService(MemberService);

        let template: PageData;
        let [pageData, store] = await Promise.all([
            station.pages.pageDataById(this.props.data.pageId),
            member.store()
        ])
        if (pageData.templateId) {
            template = await station.pages.pageDataById(pageData.templateId);
        }
        return {
            template,
            store,
            pageData
        }
    }
    render() {
        return <PageSpiner load={() => this.loadData()}>
            <PageSpinerContext.Consumer>
                {args => {
                    let { pageData, template, store } = args.result as LoadResult
                    return <MobilePage pageData={pageData} elementPage={this.props.source as UserPage} template={template} styleColor={store.Style} />
                }}
            </PageSpinerContext.Consumer>
        </PageSpiner>
    }
}




